<template>
  <div class="lix-edit">
    <checkbox-group @change="checkboxChange" class="lix-edit__checkbox-group">
      <label class="checkbox" v-for="(item, idx) in items" :key="idx" :data-idx="idx">
        <checkbox :value="item.name" :checked="item.checked" class="lix-edit__checkbox" color="#fd774d"/>{{item.value}}
      </label>
    </checkbox-group>

    <button @click="submit">保存</button>
  </div>
</template>

<script>
import { USER_SET_INFO } from '../../store/mutation-types';
import { mapGetters, mapActions } from 'vuex';
import Tip from '../../utils/tips';

// eslint-disable-next-line
let arr = [];
const getInitItems = () => {
  return [
    {name: '1', value: '书法绘画'},
    {name: '2', value: '英语口才'},
    {name: '3', value: '舞蹈跆拳'},
    {name: '4', value: '音乐戏剧'},
    {name: '5', value: '国象围棋'},
    {name: '6', value: '科学探索'},
    {name: '7', value: '学科辅导'},
    {name: '8', value: '亲子活动'}
  ];
};

export default {
  computed: {
    ...mapGetters('user', {
      hobby: 'hobby'
    })
  },
  data() {
    return {
      items: null,
      hobbyValue: []
    };
  },
  onShow() {
    this.items = getInitItems();
    if (this.hobby.length < 1) {
      return;
    }
    const items = this.items;
    items.map((curr) => {
      // eslint-disable-next-line
      if (this.hobby.indexOf(curr.value) > -1) {
        curr['checked'] = 'true';
      }
    });
    this.items = items;
  },
  onLoad() {
  },
  methods: {
    ...mapActions('user', {
      'changeUserInfo': USER_SET_INFO
    }),
    checkboxChange(e) {
      console.log('checkbox发生change事件，携带value值为：', e.mp.detail.value);
      console.log(e);
      const val = e.mp.detail.value;

      arr = val;
      console.log(arr);
    },
    submit(e) {
      console.log(arr.join(','));
      const value = arr.join(',');
      this.changeUserInfo({
        params: {'hobby': value},
        callback: function() {
          Tip.success('修改成功')
            .then(res => {
              wx.navigateBack();
            });
        }
      });
    }
  }
};
</script>

<style lang="scss">
@import "../../theme-chalk/edit";
</style>
